<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../polymer.html">

<dom-module id="x-foo">
  <style>
    #div {
      height: 40px;
      background: red;
    }
  </style>

  <template>
    <div id="div"></div>
  </template>

  <script>
    Polymer({
      is: 'x-foo',
      listeners: {
        tap: 'tapHandler'
      },
      tapHandler: function(e) {
        var ev = Polymer.dom(e);
        this._testLocalTarget = ev.localTarget;
        this._testRootTarget = ev.rootTarget;
      }
    });
  </script>
</dom-module>

<dom-module id="x-app">

  <template>
    <x-foo id="foo"></x-foo>
  </template>

  <script>
    Polymer({
      is: 'x-app',
      listeners: {
        tap: 'tapHandler'
      },
      tapHandler: function(e) {
        var ev = Polymer.dom(e);
        this._testLocalTarget = ev.localTarget;
        this._testRootTarget = ev.rootTarget;
      }
    });
  </script>

</dom-module>

<dom-module id="x-setup">
  <template>
    <div id="inner" on-tap="handler" on-track="handler" on-down="handler"
      on-up="handler"></div>
  </template>
  <script>
    Polymer({
      is: 'x-setup',
      listeners: {
        tap: 'handler',
        track: 'handler',
        down: 'handler',
        up: 'handler'
      },
      handler: function() {
      }
    });
  </script>
</dom-module>

<dom-module id="x-dynamic">
  <script>
    Polymer({
      is: 'x-dynamic',
      handler: function(){},
      setup: function() {
        this.listen(this, 'tap', 'handler');
      },
      teardown: function() {
        this.unlisten(this, 'tap', 'handler');
      }
    });
  </script>
</dom-module>

<script>
var EventCaptureBehavior = {
  properties: {
    stream: {
      type: Array,
      value: function() {
        return [];
      }
    }
  },
  handle: function(e) {
    this.stream.push(e);
  }
};
</script>

<dom-module id="x-prevent">
  <script>
    Polymer({
      listeners: {
        'down': 'prevent',
        'up': 'handle',
        'tap': 'handle',
        'track': 'handle'
      },
      behaviors: [EventCaptureBehavior],
      is: 'x-prevent',
      prevent: function(e, detail) {
        detail.prevent('tap');
        detail.prevent('track');
        e.preventDefault();
        this.handle(e);
      }
    });
  </script>
</dom-module>

<dom-module id="x-buttons">
  <script>
    Polymer({
      is: 'x-buttons',
      listeners: {
        'down': 'handle',
        'up': 'handle',
        'tap': 'handle',
        'track': 'handle'
      },
      behaviors: [EventCaptureBehavior]
    });
  </script>
</dom-module>

<dom-module id="x-document-listener">
  <script>
  Polymer({
    is: 'x-document-listener',
    setup: function() {
      this.listen(document, 'down', 'handle');
    },
    teardown: function() {
      this.unlisten(document, 'down', 'handle');
    },
    behaviors: [EventCaptureBehavior]
  });
  </script>
</dom-module>

<dom-module id="x-nested-child-prevent">
  <script>
    Polymer({
      is: 'x-nested-child-prevent',
      listeners: {
        tap: 'handle'
      },
      behaviors: [EventCaptureBehavior]
    });
  </script>
</dom-module>

<dom-module id="x-nested-prevent">
  <template>
    <style>
      :host {
        position: absolute;
        display: block;
        background: orange;
        height: 100px;
        width: 100px;
      }
      #child {
        position: relative;
        display: block;
        background: blue;
        height: 50px;
        width: 50px;
        margin-top: 25px;
        margin-left: 25px;
      }
    </style>
    <x-nested-child-prevent id="child"></x-nested-child-prevent>
  </template>
  <script>
    Polymer({
      is: 'x-nested-prevent',
      listeners: {
        track: 'handle'
      },
      behaviors: [EventCaptureBehavior]
    });
  </script>
</dom-module>

<dom-module id="x-no-gesture">
  <template>
    <button id="one" on-click="handle" on-down="noop">One</button>
    <button id="two" on-click="handle">Two</button>
  </template>
  <script>
  Polymer({
    is: 'x-no-gesture',
    behaviors: [EventCaptureBehavior],
    noop: function(){}
  })
  </script>
</dom-module>